<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="flex">
        <div class="qheader">
          <div class="qheader-item qtitle">
            <span v-if="!value.nullable" class="required-asterisk">*</span>
            {{no + 1}}. {{value.title}}
          </div>
          <div class="qheader-item qdesc">{{value.description}}</div>
        </div>
      </div>
    </div>

    <Radio :configuration="value" :data="value.choices" v-if="value.type === 'radio'" @answerChange="changeAnswer"/>
    <Input :configuration="value" :data="value.text" v-else-if="value.type === 'input'" @answerChange="changeAnswer"/>
    <Rating :configuration="value" :data="value.number" v-else-if="value.type === 'rating'" @answerChange="changeAnswer"/>
    <Checkbox :configuration="value" :data="value.choices" v-else-if="value.type === 'checkbox'" @answerChange="changeAnswer"/>
    <QLocation :configuration="value" v-else-if="value.type === 'location'" @answerChange="changeAnswer"/>
  </el-card>
</template>

<script>
import Radio from '../question/Radio.vue'
import Input from '../question/Input.vue'
import Rating from '../question/Rating.vue'
import Checkbox from '../question/Checkbox.vue'
import QLocation from './Location.vue'

const TYPE_SINGLE_CHOICE = 1
const TYPE_MULTIPLE_CHOICE = 2
const TYPE_TEXT = 3
export default {
  props: ['no','value', 'questions'],
  components: {
    Radio,
    Input,
    Rating,
    Checkbox,
    QLocation
  },
  data () {
    return {
      answer : null
    }
  },
  methods: {
    changeAnswer(answer) {
      //console.log(this.answer)
      this.answer=answer
      this.$emit("answerChange",this.no,this.answer)
    }
  },
  computed: {
    getTypeText: function () {
      switch (this.type) {
        case TYPE_SINGLE_CHOICE: {
          return '单选题'
        }
        case TYPE_MULTIPLE_CHOICE: {
          return '多选题'
        }
        case TYPE_TEXT: {
          return '文本题'
        }
      }
      return this.type
    }
  }
}
</script>

<style scoped lang="sass">
.required-asterisk
  color: #F56C6C

.flex
  display: flex
  align-items: center
  justify-content: space-between

.qheader
  .qheader-item
    margin: .1cm

  .qtitle
    font-size: 20px

  .qdesc
    font-size: 13px

</style>

<style scoped>
.header-title {
  margin-bottom: 18px;
  line-height: 1;
}
.qheader {
  display: block;
}
.flex {
  display: flex;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.inputBox {
  display: flex;
  margin-bottom: 20px;
}
.option {
  display: flex;
  flex: auto;
}
.contorls {
  padding-left: 15px;
  white-space: nowrap;
}
</style>
